
<template>
  <div class="detailed-gender-out">
    <el-select v-model="value" placeholder="年份" style="width: 200px">
      <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
          :disabled="item.disabled"
      />
    </el-select>
    <div class="detailed-item" id="detailed-gender-main">
    </div>
  </div>

</template>

<style scoped>

</style>

<script setup>
import {onMounted,ref,watch} from "vue";
import {useDetailedStore} from "@/store/useDetailedStore.js";
import {detailedGender} from "@/consts/eventName.js";
import * as echarts from "echarts";
import {getGenderByYear} from "@/api/gender.js";
import theme from "../../../../static/theme/walden.json"

let data
let option;
let myChart;
let chartDom;

let options = []
let value = ref(" ")


for (let i = 2002; i < 2024; i++) {
  options.push({
    value: i,
    label: i+'年',
  })
}


onMounted(()=>{
  data = useDetailedStore().detailedData.get(detailedGender)
  chartDom = document.getElementById('detailed-gender-main');
  myChart = echarts.init(chartDom,theme);
  option = createOption(data)

  option && myChart.setOption(option);
})

watch(value,(newValue)=>{
  getGenderByYear(newValue).then((value)=>{

    if (value.data.code === 404 ){
      alert("没有该年数据")
    }

    let data = value.data
    let xAxis = []
    let seriesData = []

    data.forEach((item)=>{
      const jsonMap = new Map(Object.entries(item))

      xAxis.push(jsonMap.keys().next().value)
      seriesData.push(jsonMap.values().next().value)
    })

    return {
      xAxis:xAxis,
      seriesData:seriesData
    }
  }).then((value)=>{
    data = value
    option = createOption(data)
    option && myChart.setOption(option);
  })
})


function createOption(data){
  return {
    title: {
      text: '性别比例',
      textStyle: {
        fontSize:15 // 设置标题字体大小
      },
      left:'center'
    },
    legend:{
      data:["男女比例"],
      right:5,
      top:5
    },
    tooltip: {
      trigger: 'axis'
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      top: '15%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: data.xAxis
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: '男女比例',
        type: 'line',
        stack: 'Total',
        data: data.seriesData
      }
    ]
  };
}

</script>
